<template>
  <div>
    <!-- 头部 -->
    <header>
      <div class="h-left">
        <router-link to="/home"
          ><img src="../../assets/image/18721.png" style="width: 8px"
        /></router-link>
      </div>
      <div class="h-title">我的书架</div>
      <div class="h-right">
        <router-link
          to="/home"
          style="color: #999; font-size: 12px; width: 30px; margin-right: 10px"
          >首页</router-link
        >
      </div>
    </header>

    <!-- 未登录 -->
    <div class="weit-book">
      <div class="book-pope">
        <div class="book-img">
          <img src="../../../public/assets/image/touxian.jpg" alt="" />
        </div>
        <div class="book-not">
          <p class="username">
            lin
            <router-link to="/monthly" tag="span"
              ><img src="../../../public/assets/image/14816vip.png" alt=""
            /></router-link>
          </p>
          <p class="balance">余额：<span>0书币</span></p>
          <p class="readtime">阅读时长：<span>102小时</span></p>
        </div>
      </div>
      <div class="book-login">
        <router-link
          tag="div"
          class="personal"
          style="color: #555"
          to="/percenter"
          >个人中心</router-link
        >
      </div>
    </div>

    <!-- 阅读历史 -->
    <div class="history">
      <van-tabs type="card">
        <van-tab title="收藏">
          <bookpiece></bookpiece>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 页脚 -->
    <div class="footer">
      <div class="foot-app">
        <a href="#" class="active">触屏版</a>
        <a href="#">客户端</a>
      </div>
      <div class="foot_panda">©2022熊猫看书</div>
      <div class="foot_panda" id="icpbei">京ICP备 11009265号-5</div>
    </div>
  </div>
</template>

<script>
// 最近阅读
// 收藏
import bookpiece from "../../components/BookPiece.vue";
export default {
  
  components: {
    bookpiece,
  },
};
</script>

<style lang="scss">
/* 未登录 */
.weit-book {
  background: #fff;
  padding: 15px 10px;
  position: relative;
}
.book-pope {
  display: flex;
}
.book-img {
  img {
    width: 60px;
    height: 60px;
    border-radius: 60px;
  }
}
.book-not {
  margin-left: 10px;

  .username {
    font-size: 14px;
    & > span {
      img {
        margin-left: 5px;
        width: 18px;
        height: 13px;
      }
    }
  }

  .balance {
    font-size: 12px;
    & > span {
      color: #9f9f9f;
    }
  }
  .readtime {
    font-size: 14px;
    & > span {
      font-size: 12px;
      color: #9f9f9f;
    }
  }
}
.book-login {
  position: absolute;
  right: 10px;
  top: 15px;
  font-size: 14px;
  text-align: center;
  color: #fff;
  font-family: "微软雅黑";
  width: 65px;
  // height: 35px;
  line-height: 32px;
  .login {
    line-height: 32px;
    background-color: #d3270f;
    border-radius: 5px;
  }
  .personal {
    background-color: #f7f7f7;
    border-radius: 5px;

    line-height: 32px;
  }
}
/* 未登录 */

/* 阅读历史 */
.history {
  margin-top: 10px;
  background: #fff;
  padding-bottom: 1px;
  padding-top: 10px;
}
.mar {
  margin-left: 10px;
  margin-right: 10px;
}
.catalog {
  display: -webkit-box;
  height: 35px;
  border-left: 1px solid #b8b8b8;
  margin-bottom: 10px;
  border-top: 1px solid #b8b8b8;
  border-bottom: 1px solid #b8b8b8;
  margin-right: 20px;
  margin-left: 20px;
  background-color: #ededed;
  .active {
    color: #ff0020;
    background-color: #fff;
  }
  & > div {
    -webkit-box-flex: 1;
    text-align: center;
    font-size: 15px;
    color: #666666;
    line-height: 35px;
    border-right: 1px #b8b8b8 solid;
  }
}
.book_piece {
  margin: 0 5px;
  border-bottom: 1px solid #efefef;
  position: relative;
}
.no_yuedu {
  width: 44px;
  height: 58px;
  margin: 0 auto;
  padding-top: 10px;
  img {
    width: 44px;
    height: 58px;
  }
}
.cener_nr {
  text-align: center;
  margin-top: 10px;
  padding-bottom: 10px;
  line-height: 24px;
}
.nr-top {
  font-size: 15px;
}
.nr-bottom {
  font-size: 12px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 20px;
}
/* 阅读历史 */
</style>